<style lang="scss">
	.page,page{
		background-color: #f9ecec;
	}
	.header-img{
		display: block;
		width: 100%;
		height: 280rpx;
		margin-bottom: 40rpx;
	}
	.page_title{
		width: 100%;
		line-height: 54rpx;
		font-size: 32rpx;
		color: #212121;
		text-align: center;
	}
	.list{
		width: 690rpx;
		margin: 0 auto;
		.input{
			.name{
				color: #343434;
				font-size: 34rpx;
				line-height: 76rpx;
			}
			input{
				border: 1px solid #fabcbc;
				border-radius: 5px;
				font-size: 28rpx;
				padding: 15rpx;
				flex: 1;
				background-color: #FFFFFF;
			}
			.pickerText{
				border: 1px solid #fabcbc;
				border-radius: 5px;
				font-size: 28rpx;
				color: #343434;
				padding: 15rpx;
				position: relative;
				flex: 1;
				background-color: #FFFFFF;
				&::after{
					content: '';
					position: absolute;
					right: 20rpx;
					top: 50%;
					margin-top: -8rpx;
					width: 0;
					height: 0;
					border-left: 8rpx solid transparent;
					border-right: 8rpx solid transparent;
					border-top: 16rpx solid #cdcdcd;
				}
				.uni-input{
					color: #343434;
				}
			}
		}
		.code-cont{
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #fabcbc;
			border-radius: 5px;
			background-color: #FFFFFF;
			input{
				font-size: 28rpx;
				padding: 15rpx;
				flex: 1;
				border-right: 1px solid #fabcbc;
			}
			.code-btn{
				padding: 0 30rpx;
				color: #d71511;
				font-size: 28rpx;
			}
		}
		.address_detail{
			align-items: flex-start;
			.textarea{
				flex: 1;
				textarea{
					border: 1px solid #fabcbc;
					border-radius: 5px;
					font-size: 28rpx;
					padding: 15rpx;
					height: 120rpx;
					width: 100%;
					box-sizing: border-box;
					background-color: #FFFFFF;
				}
			}
		}
	}
	.confirm_btn{
		width: 474rpx;
		line-height: 88rpx;
		background: #d71511;
		text-align: center;
		color: #ffffff;
		font-size: 34rpx;
		margin: 46rpx auto{
			top: 0;
		};
		border-radius: 10rpx;
		border-radius: 50px;
	}
	.tips-text{
		width: 690rpx;
		margin: 0 auto;
		line-height: 35rpx;
		text{
			display: block;
			color: #808080;
			font-size: 24rpx;
		}
	}
	.mt25{
		margin-top: 25rpx;
	}
	
	.images-list{
		padding: 35rpx 30rpx;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		.image-file{
			position: relative;
			z-index: 1;
			width: 280rpx;
			height: 186rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			.close{
				height: 35rpx;
				width: 35rpx;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				z-index: 10;
			}
			.image{
				width: 280rpx;
				height: 186rpx;
			}
		}
		.add-image{
			width: 275rpx;
			height: 180rpx;
			border: 2px dashed #b2b2b2;
			border-radius: 5px;
			font-size: 100rpx;
			color: #b2b2b2;
			text-align: center;
			text{
				color: #b2b2b2;
				font-size: 28rpx;
				display: block;
			}
		}
	}
	.agreement-text{
		display: flex;
		text-align: center;
		justify-content: center;
		margin-top: 46rpx;
		padding-bottom: 15rpx;
		.red{
			color: #D71611;
			
		}
	}
	
</style>


<template>
	<view class="page">
		<image class="header-img" src="../../static/images/jewel/beStore_bg.jpg" mode="widthFix"></image>
		<view class="page_title">— 商家申请入驻 — </view>
		<view class="list">
			<!-- <view class="input">
				<view class="name store_type">商家类型</view>
				<view class="pickerText">
					<picker @change="bindPickerChange" :value="storeTpyeIndex" :range="storeTpye">
			            <view class="uni-input">{{storeTpye[storeTpyeIndex]}}</view>
			        </picker>
				</view>
			</view> -->
			<view class="input">
				<view class="name">*企   业</view><input type="text" placeholder="请输入企业名称" v-model="data.company" placeholder-style="color:#b2b2b2" />
			</view>
			<!-- <view class="input">
				<view class="name">店铺名称</view><input type="text" placeholder="请输入您的店铺名称" v-model="data.shop_name" placeholder-style="color:#b2b2b2" />
			</view> -->
			<view class="input">
				<view class="name">*联系人</view><input type="text" placeholder="请输入联系人真实姓名" v-model="data.realname" placeholder-style="color:#b2b2b2" />
			</view>
			<view class="input">
				<view class="name">*手机号码</view><input type="number" placeholder="此号码用于商家后台登录的账户" v-model="data.mobile" placeholder-style="color:#b2b2b2" />
			</view>
			<view class="code-cont">
				<input type="number" placeholder="请输入验证码" v-model="data.code" placeholder-style="color:#b2b2b2" />
				<view class="code-btn" @tap="getCode">{{count}}{{btnMsg}}</view>
			</view>
			<view class="input">
				<view class="name">设置商家密码</view>
				<input type="text" password placeholder="请设置密码" v-model="data.password" placeholder-style="color:#b2b2b2" />
			</view>
			<view class="input">
				<view class="name">确认密码</view>
				<input type="text" password placeholder="再次输入密码" v-model="data.confirm_password" placeholder-style="color:#b2b2b2" />
			</view>
			<view class="input" @tap="showMulLinkageThreePicker">
				<view class="name">企业地址</view>
				<view class="pickerText">{{pickerText}}</view>
			</view>
			<view class="input address_detail">
				<view class="name">详细地址</view>
				<view class="textarea">
					<textarea v-model="data.address_detail" placeholder="如道路、门牌号、小区、楼栋号、单元室等。" placeholder-style="color:#b2b2b2"></textarea>
				</view>
			</view>
			<view class="input">
				<view class="name store_type">经营范围</view>
				<view class="pickerText">
					<picker @change="bindPickerChange" :value="businessTpyeIndex" :range="businessTpye" range-key="name">
			            <view class="uni-input">{{businessTpyeText}}</view>
			        </picker>
				</view>
			</view>
		</view>
		<!-- <view class="page_title mt25">商家企业认证</view>
		<view class="update_store">
			<view class="images-list">
				<block v-for="(image,index) in imageList" :key="index">
					<view class="image-file">
						<image src="@/static/icons/jewel/close_diy.png" @tap="delete_img(image.url, index)" class="close"></image>
						<image class="image" :src="image.temp" :data-src="image.temp" @tap="previewImage"></image>
					</view>
				</block>
				<view class="add-image" @tap="chooseImage">+<text>营业执照</text></view>
			</view>
		</view>
		<view class="tips-text">
			<text>温馨提示：</text>
			<text>1.为保证您的认证顺利，请保证信息清晰可见。</text>
			<text>2.此证件信息，只作为商家入驻申请认证，请放心上传。</text>
		</view> -->
		<view class="agreement-text">
			<text class="red">*</text>申请入驻表示同意
			<navigator open-type="navigate" hover-class="none" class="red">入驻协议</navigator>
		</view>
		<button class="confirm_btn" @tap="Confirm">申请入驻</button>
		
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" @onConfirm="pickerOnConfirm"></mpvue-city-picker>
		
	</view>
</template>
<script>
	var timer = null, 
		TIME_COUNT = 60;
	import jewel from '@/common/common_zb.js';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import area from '@/components/mpvue-citypicker/city-data/area.js';
	import city from '@/components/mpvue-citypicker/city-data/city.js';
	import province from '@/components/mpvue-citypicker/city-data/province.js';
	import md5 from '@/common/md5.js'
	export default {
		data() {
			return {
                showPopup: false,
				isMaker:false,
				pickerText:'请选择城市',
				themeColor: 'red',
				storeTpye: ['有得退商家', '珠宝商家'],
				storeTpyeIndex: 0,
				data: {
					company:'',
					shop_name:'',
				    realname: '',
				    mobile: '',
					address:'',
					address_detail:'',
					business_licence:[],
					password:'',
					confirm_password:'',
					code:'',
					businessType:0
				},
				imageList: [],
				btnMsg: '',
				count: '获取验证码',
				businessTpye: [],
				businessTpyeIndex: 0,
				businessTpyeText:''
			};
		},
		components: {
		    mpvueCityPicker
		},
        methods: {
			// 三级联动选择
			showMulLinkageThreePicker() {
			    this.$refs.mpvueCityPicker.show();
				uni.hideKeyboard()
			},
			pickerOnConfirm(e) {
			    let val = e.value;
			    this.pickerText = this.data.address  = e.label.replace(/-/g, ',');
			},
			bindPickerChange(e) {
				this.businessTpyeIndex = e.target.value
				this.businessTpyeText = this.businessTpye[e.target.value].name
			},
			Confirm(){
				let that = this
				let url = ''
				if(that.data.company == ''){
					jewel.showToast('请输入负责人姓名')
					return false
				}else if(that.data.realname == ''){
					jewel.showToast('请输入负责人姓名')
					return false
				}else if(!jewel.checkPhone(that.data.mobile)){
					jewel.showToast('请输入正确的手机号码')
					return false
				}else if(that.data.address == ''){
					jewel.showToast('请选择城市')
					return false
				}else if(that.data.password == ''){
					jewel.showToast('请设置密码')
					return false
				}else if(that.data.password.length < 6){
					jewel.showToast('请输入超过6位数的密码')
					return false
				}else if(that.data.confirm_password == '' || that.data.password != that.data.confirm_password){
					jewel.showToast('两次密码不一致')
					return false
				}
				uni.showLoading({
					title:'加载中..'
				})
				that.data.business_licence = that.getImageList('url')[0]
				that.data.password = md5(that.data.password)
				that.data.confirm_password = md5(that.data.confirm_password)
				that.data.businessType = that.businessTpye[that.businessTpyeIndex].id
				jewel.post('Seller/apply',that.data,false,function(res){
					uni.hideLoading()
					jewel.showToast(res.data.msg)
					if(res.data.code == 0){
						setTimeout(() => {
							uni.switchTab({
								url:'/pages/jewel/index/index'
							})
						}, 3000)
					}
				});
			},
			chooseImage: async function() {
				let that = this;
				let url = ''
				if(that.storeTpyeIndex == 0){
					url = 'https://api.gdjewel.com/Seller/uploadBusinessLicence'
				}else{
					url = 'https://jewel.gdjewel.com/api/Seller/uploadBusinessLicence'
				}
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'],
					success: (res) => {
						let filePath = res.tempFilePaths[0];
						uni.uploadFile({
							url: url,
							fileType: 'image',
							filePath: filePath,
							name: 'business_licence',
							header: {'app-key': jewel.app_key},
							success: (uploadFileRes) => {
								let data = uploadFileRes.data;
								data = JSON.parse(data);
								if(data.code == 0) {
									that.imageList = that.imageList.concat({
										'temp': filePath,
										'url': data.data.url
									});
								}else{
									jewel.showToast(data.msg, 1500);
								}
							}
						});
					}
				})
			},
			delete_img: function (filePath, index){
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除该图片吗？',
					success: function (res) {
						if (res.confirm) {
							if(that.storeTpyeIndex == 0){
								jewel.get('Seller/deleteImage', {filePath: filePath}, false, function(res){
									that.imageList.splice(index,1);
								})
							}else{
								jewel.get('Seller/deleteImage', {filePath: filePath}, false, function(res){
									that.imageList.splice(index,1);
								})
							}
						}
					}
				});
			},
			
			// 获取具体的图片列表
			getImageList: function (key){
				let imageList = this.imageList;
				let urls = [];
				for (let i in imageList) {
					urls = urls.concat(imageList[i][key]);
				}
				return urls;
			},
			previewImage: function(e) {
				var current = e.target.dataset.src;
				let urls = this.getImageList('temp');
				uni.previewImage({
					current: current,
					urls: urls
				})
			},
			// 获取验证码
			getCode() {
				let that = this
				uni.hideKeyboard()
				if (!that.timer) {
					uni.showLoading({
						title: '正在发送'
					});
					jewel.post('auth/sendRegVerify',{mobile: that.data.mobile},false,function(res){
						uni.hideLoading()
						jewel.showToast(res.data.msg,res.data.code == 0?1500:3000)
						if (res.data.code == 0) {
							that.count = TIME_COUNT;
							that.btnMsg = 's重发';
							that.timer = setInterval(() => {
								if (that.count > 0 && that.count <= TIME_COUNT) {
									that.count--;
								} else {
									clearInterval(that.timer);
									that.timer = null;
									that.count = '重新获取';
									that.btnMsg = '';
								}
							}, 1000);
						} else {
							clearInterval(that.timer);
							that.timer = null;
							that.count = '获取验证码';
							that.btnMsg = '';
						}
					});
				}
			}
        },
		onLoad() {
			let that = this
			jewel.post('Seller/business',{},false,function(res){
				that.businessTpye = res.data.data
				that.businessTpyeText = res.data.data[0].name
			})
		}
	}
</script>

